<template>
<div class="personal-center-main">
	<div class="per-header">
		<div class="per-message">
			<div class="per-name clear">
				<div class="header-photo fl">
					<img v-if="personalCenterData.headerUrl" :src="personalCenterData.headerUrl"/>
					<img v-else src="../assets/image/pho_avatar@2x.png"/>
				</div>
				<div class="header-Login fl" v-if="personalCenterData.nickname || personalCenterData.nickname === ''">
					{{personalCenterData.nickname}}
				</div>
				<a href="javascript:;" @click="loginNow" class="header-Login fl" v-else>
					<span>登录&nbsp;&nbsp;</span><span>/</span><span>&nbsp;&nbsp;注册</span>
				</a>
			</div>
		</div>
	</div>
	<div class="my-order">
		<div class="order-header clear">
			<router-link id="" to="">
			<p class="order-title fl">我的订单</p>
			<img src="../assets/image/ico_leave-for@2x.png" class="all-order-icon fr"/>
			<p class="all-order fr">查看全部订单</p>
			</router-link>
		</div>
		<ul class="order-content clear">
			<li class="fl"><router-link id="" to=""><div><img src="../assets/image/ico_obligation@2x.png"/><i class="num-icon">{{unpayNum}}</i></div><p>待付款</p></router-link></li>
			<li class="fl"><router-link id="" to=""><div><img src="../assets/image/ico_To-send-the-goods@2x.png"/><i class="num-icon">{{undeliveryNum}}</i></div><p>待发货</p></router-link></li>
			<li class="fl"><router-link id="" to=""><div><img src="../assets/image/ico_For-the-goods@2x.png"/><i class="num-icon hidden"></i></div><p>待收货</p></router-link></li>
			<li class="fl"><router-link id="" to=""><div><img src="../assets/image/ico_To-evaluate@2x.png"/><i class="num-icon hidden"></i></div><p>待评价</p></router-link></li>
			<li class="fl"><router-link id="" to=""><div><img src="../assets/image/ico_after-sale@2x.png"/><i class="num-icon hidden"></i></div><p>退货/售后</p></router-link></li>
		</ul>
	</div>
	<ul class="item-list clear">
		<li class="list clearfix"><router-link id="" to="/myIntegral"><img src="../assets/image/ico_integral@2x.png" class="list-icon fl"/><p class="fl">我的积分</p><img src="../assets/image/ico_leave-for@2x.png" class="list-to fr"/></router-link></li>
		<li class="list clearfix"><router-link id="" to="/myCollect"><img src="../assets/image/ico_collect@2x.png" class="list-icon fl"/><p class="fl">我的收藏</p><img src="../assets/image/ico_leave-for@2x.png" class="list-to fr"/></router-link></li>
		<li class="list clearfix"><router-link id="" to=""><img src="../assets/image/ico_opinion@2x.png" class="list-icon fl"/><p class="fl">意见与反馈</p><img src="../assets/image/ico_leave-for@2x.png" class="list-to fr"/></router-link></li>
	</ul>
	<ul class="item-list clear">
		<li class="list clearfix"><router-link id="" to=""><img src="../assets/image/ico_join@2x.png" class="list-icon fl"/><p class="fl">加入搭搭</p><img src="../assets/image/ico_leave-for@2x.png" class="list-to fr"/></router-link></li>
	</ul>
	<footBottom pageType='my'></footBottom>
	<login></login>
</div>
</template>
<script>
import footBottom from '../components/footer'
import login from './login'
import store from '../assets/js/store.js'

export default {
	data () {
		return {
			focus:8,
			fans:17,
			collection:6,
			footprint:12,
			unpayNum:1,
			undeliveryNum:22,
			personalCenterData: {},
			token: '',
			isLogin: true,
		}
	},
	name: 'app',
	components: {
	   footBottom,
	   login
	},
	beforeMount:function() {
		this.token = window.localStorage.getItem('token') || '';
	},
	created:function () {
		this.$store.commit('upIntegral', {integral: false});
		this.$nextTick(function () {
			this.personalCenterView();
		});
	},
	mounted: function() {
		Util.ajaxPath.bus.$on('upNickName', (name) => {
		    this.personalCenterData.nickname = name;
		});
	},
	methods:{
		loginNow: function() {
			this.isClick = true;
			this.$store.commit('upLoginOpen', { isOpen : true, integral: false});
		},

		personalCenterView:function () {
			var _this = this;
			this.$http.post(Util.ajaxPath.devProductUrl+"shop-mms/mms/me",{token: this.token}, {emulateJSON:true}).then(function (res) {
				if(res.body.state == 'error') {
					_this.personalCenterData = {};
					_this.isLogin = false;
				}else {
				 	_this.personalCenterData = res.body.content;
				 	_this.isLogin = true;
				}
			});
		}
	}
}
</script>
<style lang="scss">
.personal-center-main{
	.per-header{
		border-bottom: 0.2rem #f4f5f5 solid;
		.per-message{
			width: 100%; height: 2.34rem; background: url("../assets/image/bg_backdrop@2x.png") no-repeat 100% 100%;
			.per-name{
				height: 1.5rem; padding-top: 0.58rem;
				.header-photo{
					width: 1.08rem; height: 1.08rem; margin: 0 0.41rem 0 0.42rem; padding: 0.02rem; border-radius: 50%; background: #fff;
					img{ width: 1.08rem; height: 1.08rem; border-radius: 50%; }
				}
				.header-Login,.header-userinfo{
					padding: 0.43rem 0;
					span{ display: block; float: left; font-size: 0.26rem; line-height: 0.26rem; color: #fff; }
					a{ display: block; height: 0.26rem; font-size: 0.26rem; line-height: 0.26rem; color: #fff; }
				}
			}
		}
	}
	.my-order{
		background: #fff;
		.order-header{
			height: 0.79rem; padding: 0 0.21rem 0 0.3rem; border-bottom: 1px solid #f4f5f5;
			a{ display: block; height: 0.79rem; }
			.order-title{ height: 0.79rem; font-size: 0.26rem; line-height: 0.79rem; color: #151517; }
			.all-order{ padding-right: 0.06rem; height: 0.79rem; font-size: 0.22rem; line-height: 0.79rem; color: #999; }
			.all-order-icon{ display: block; width: 0.3rem; height: 0.3rem; padding-top: 0.24rem; }
		}
		.order-content{
			height: 1.4rem;
			li{
				height: 1.4rem; width: 20%;
				a{ display: block; }
				div{
					position: relative; width: 0.46rem; height: 0.46rem; margin: 0.28rem auto 0.17rem;
					img{ display: block; width: 0.46rem; height: 0.46rem; }
					.num-icon{ position: absolute; top: -0.06rem; right: -0.13rem; width: 0.26rem; height: 0.26rem; border: 0.02rem solid #ff365d; border-radius: 50%; font-size: 0.18rem; line-height: 0.26rem; text-align: center; color: #ff365d; background: #fff; }
				}
				p{ height: 0.22rem; font-size: 0.22rem; line-height: 0.22rem; text-align: center; color: #151517; }
			}
		}
	}
	.item-list{
		border-top: 0.2rem #f4f5f5 solid; background: #fff;
		.list{
			width: 100%; height: 0.9rem;
			+.list{ border-top: 1px solid #f4f5f5; }
			a{ display: block; height: 0.9rem; }
			.list-icon{ display: block; width: 0.36rem; height: 0.36rem; padding: 0.24rem 0.2rem 0 0.3rem; }
			p{ font-size: 0.26rem; line-height: 0.9rem; color: #333; }
			.list-to{ display: block; width: 0.3rem; height: 0.3rem; padding: 0.3rem 0.21rem 0 0; }
		}
	}
}
</style>